<template>
	<view class="recharge">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">充值</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>

		<view class="withdrawal-content">
			<view class="title">充值金额(元)</view>
			<view class="content-input">
				<view class="">￥</view>
				<view class="">
					<input type="number" v-model="enterAmount" class="input-style" @input="enterAmountChange"
						placeholder="请输入充值金额" placeholder-class="place-style" />
				</view>
			</view>
			 <!-- 错误提示 -->
			<view class="error" v-if="errorTips===1">
				<text class="error-icon"><u-icon name="error-circle" color="#ff0000"></u-icon></text>
				<text class="error-text">单笔充值不能大于{{huifuLimitMoney}}</text>
			</view>
			<view v-else-if="curPayType==2&&huifuIsOpen==0">注意：单笔充值不能大于{{huifuLimitMoney}}</view>
			<view v-else-if="curPayType==0&&zhifubaoIsOpen==0">注意：单笔充值不能大于{{zhifubaoLimitMoney}}</view>
			<!-- 			<view class="cont" style="padding-top: 20upx;">手续费 {{config.cashOutRate}}% <text
					class="num">￥{{withdrawalExpenses}}</text>
			</view> -->
			<view class="bank-card-info">
				<view class="bank">支付方式</view>
				<view class="bankBox">

					<view class="bankItem">
						<u-radio-group v-model="curPayType" @change="radioGroupChange" class="radio-list">
							<view v-for="(item, index) in payTypeList" class="radio-item">
								<view>
									<image :src="item.imgSrc" class="img" mode="widthFix"></image>
								</view>
								<view class="text">{{item.name}}</view>
								<view>
									<u-radio :key="index" :name="item.payType" inactiveColor="#000000"
										labelColor="#000000" labelSize="12px" size="18px" activeColor="#C09B3A"
										shape="circle"></u-radio>
								</view>
							</view>
						</u-radio-group>
					</view>
				</view>

			</view>
			<view class="submit-bottom">
				<view class="submit-btn" @tap="submitFn">确认充值</view>
			</view>
			<view id='test' v-html="data" class="urlhidden"></view>
		</view>

		<u-popup :show="isShow" mode="bottom" @close="closeFn" @open="openFn" :closeable="true">
			<view class="boxPopup">
				<view class="title">选择到账银行卡</view>
				<view v-for="(item,index) in lists" :key="index" class="lists-item" @tap="bankIndex = index">
					<view class="">
						<view class="card-info">{{item.name}}</view>
						<view class="">24小时到账</view>
					</view>
					<u-icon v-if="bankIndex == index" class="iconf" name="checkbox-mark" color="#2c1769" size="50upx">
					</u-icon>
				</view>
				<view class="submit-bottom">
					<view class="submit-btn" @tap="submitBank">确认</view>
				</view>
			</view>
		</u-popup>

		<view v-if="withdrawalFlag" class="withdrawalModal">
			<view class="withdrawalBox">
				<view class="title">请输入转让密码
					<u-icon name="close" class="closeIcon" @tap="closeWithdrawal" color="#999" size="30upx"></u-icon>
				</view>
				<view class="password">
					<view class="flex">
						<view class="password_num" v-for="(item,index) in miney_list">
							<view class="inputCont" v-if="item.id == index">
								<view v-for="(res,i) in withdrawal.payPsw.length" v-show="i == index">
									<view class="miney_data"></view>
								</view>
							</view>
						</view>
					</view>
					<input v-model="withdrawal.payPsw" maxlength="6" type="number" value="123" @input="input_num">
				</view>
			</view>
		</view>
		<u-keyboard ref="uKeyboard" @confirm="confirmWithdrawal" @change="keyChange" @backspace="backspace"
			:showCancel="false" confirmText="提现" mode="number" :dotDisabled="true" :show="keyboardShow"></u-keyboard>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		appfundaccountRecharge,
		appfundaccountGetRwConfig,
		getLimitMoney
	} from "@/api/user.js"
	import bigNumber from 'bignumber.js'
	import _ from "lodash";
	export default {
		data() {
			return {
				data: '',
				errorTips:0,
				curPayType: 0,
				payTypeList: [
					{
						name: '支付宝支付',
						imgSrc: '../../static/detail/zhifubao.png',
						payType: 0,
					},
					
					// {
					// 	name: '微信支付',
					// 	imgSrc: '../../static/detail/weixin.png',
					// 	payType: 1,
					// 	checked: false
					// },
					
					{
						name: '银行卡支付',
						imgSrc: '../../static/detail/yinghangka.png',
						payType: 2,
					},
				],
				withdrawal: {
					payPsw: "",
					setFocus: false
				},
				keyboardShow: false,
				checked: true,
				miney_list: [{
						id: 0,
						name: ''
					},
					{
						id: 1,
						name: ''
					},
					{
						id: 2,
						name: ''
					},
					{
						id: 3,
						name: ''
					},
					{
						id: 4,
						name: ''
					},
					{
						id: 5,
						name: ''
					},
				],
				withdrawalFlag: false,
				totalAmount: 8000,
				enterAmount: '',
				withdrawalExpenses: 0,
				enterExpenses: 0,
				isShow: false,
				bankIndex: 0,
				lists: [{
						name: '招商银行 (2258)',
						num: 222
					},
					{
						name: '招商银行 (2258)',
						num: 222
					},
					{
						name: '招商银行 (2258)',
						num: 222
					},
				],
				selectIndex: 0,
				config: {},
				huifuLimitMoney: 0,
				zhifubaoLimitMoney: 0,
				zhifubaoIsOpen: '',
				huifuIsOpen: ''
			}
		},
		onShow() {
			//更新后台的限制金额
			getLimitMoney().then(res=>{
				console.log(res.data.obj)
				this.huifuLimitMoney = res.data.obj.huifuLimitMoney;
				this.zhifubaoLimitMoney = res.data.obj.zhifubaoLimitMoney;
				this.zhifubaoIsOpen = res.data.obj.zhifubaoIsOpen;
				this.huifuIsOpen = res.data.obj.huifuIsOpen;
			})
		},
		onLoad() {
			appfundaccountGetRwConfig().then(res => {
				if (res.data.success) {
					this.config = JSON.parse(res.data.obj);
				}
			})
		},
		watch: {
			enterAmount(newVal, orderVale) {
				if(this.curPayType==2 && this.huifuIsOpen==0){
						if(new bigNumber(newVal).comparedTo(this.huifuLimitMoney) === 1) {
								console.log(newVal + " 大于 ");
							this.errorTips = 1;
							newVal = this.huifuLimitMoney
							this.$nextTick(()=>{
								this.enterAmount = this.huifuLimitMoney
							})
							
						} else {
							this.errorTips = 0;
						}
						this.withdrawalExpenses = newVal > 0 ? Number(this.enterAmount * this.config.cashOutRate / 100).toFixed(
							2) : "0.00";
				}else if(this.curPayType==0 && this.zhifubaoIsOpen==0){
					if(new bigNumber(newVal).comparedTo(this.zhifubaoLimitMoney) === 1) {
							console.log(newVal + " 大于 ");
						this.errorTips = 1;
						newVal = this.zhifubaoLimitMoney
						this.$nextTick(()=>{
							this.enterAmount = this.zhifubaoLimitMoney
						})
						
					} else {
						this.errorTips = 0;
					}
					this.withdrawalExpenses = newVal > 0 ? Number(this.enterAmount * this.config.cashOutRate / 100).toFixed(
						2) : "0.00";
				}
			},
		},
		methods: {
			appJumpMiniPro() {
				// 获取分享服务列表
				plus.share.getServices(
					res => {
						let sweixin = '';
						for (var i = 0; i < res.length; i++) {
			  		let t = res[i];
							if (t.id == 'weixin') {
								sweixin = t;
							}
						}
						if (sweixin) {
							sweixin.launchMiniProgram({
									id: 'gh_32620xxxxxx', // 要跳转小程序的原始ID
									path: `pages/tslogin/tslogin?do=login&appName=暴漫APP`, //  可带参数
									type: 2 // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
								},
								// 目标小程序点击返回App后执行的回调，在此接收微信小程序传递的参数
								res2 => {
									console.log(typeof res2, res2)
									// res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
									let result = JSON.parse(res2)
									console.log(result)
									// 拿到参数后执行你需要的逻辑    
								},
								err2 => {
									console.log(err2)
								}
							);
						} else {
							uni.showToast({
								icon: 'none',
								title: '当前环境不支持微信操作!'
							})
						}
					},
					err => {
						console.log(err)
					}
				)
			},
			radioGroupChange(n) {
				console.log('radioGroupChange', n);
			},
			confirmWithdrawal() { //确认提现
				this.keyboardShow = false;
				this.withdrawalFlag = false;
			},
			keyChange(val) { // 按键被点击
				if (this.withdrawal.payPsw.length <= 5) {
					this.withdrawal.payPsw += val;
				}
			},
			checkChange() {
				this.checked = !this.checked;
			},
			backspace() { // 退格键被点击
				// 删除value的最后一个字符
				if (this.withdrawal.payPsw.length) this.withdrawal.payPsw = this.withdrawal.payPsw.substr(0, this
					.withdrawal.payPsw.length - 1);
			},
			closeWithdrawal() { //键盘及密码输入框
				this.withdrawal = {
					payPsw: "",
					setFocus: false
				};
				this.keyboardShow = false;
				this.withdrawalFlag = false;
			},
			input_num() { //监听密码变化
				const that = this;
				that.miney_list.forEach((item, index) => {
					for (var i = 0; i < that.withdrawal.payPsw.length; i++) {
						if (i == index) {
							that.miney_list[index].name = '*';
						}
					}
				})
			},

			submitBank() { //确认银行卡
				this.isShow = false;
			},
			enterAmountChange(e) { //输入变化
				let value = e.target.value;
				value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数

				if (value.indexOf(".") < 0 && value != "") {
					//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
					value = parseFloat(value);
				}
				this.$nextTick(function() {
					this.enterAmount = value;
				})
			},
			submitFn:_.debounce( function(){
					if (this.enterAmount > 0) {
						//将用户输入的金额减掉随机的20%
						// console.log("随机金额:"+Math.floor(Math.random()*(this.enterAmount*0.2)));
						if(this.enterAmount>=1000){
							this.enterAmount = parseFloat(this.enterAmount - Math.floor(Math.random()*(this.enterAmount*0.1))).toFixed(2);
							
						}
						console.log("金额:"+this.enterAmount);
							let num = this.enterAmount / this.config.rechargeMultiple;
							console.log("倍数金额:"+num)
							console.log(this.config.rechargeMultiple)
							if (Number.isInteger(num)) {
								let curPayType = this.curPayType
								if (curPayType != null) {
									let data = {
										amount: this.enterAmount,
										payType: curPayType
									}
									console.log("#data# " + JSON.stringify(data))
									appfundaccountRecharge(data).then(res => {
										console.log("#res# " + JSON.stringify(res))
										if (res.data.msg.includes('充值金额必须是')) {
											this.$u.toast(res.data.msg)
										}
										if (res.data.success) {
											if (curPayType === 0) {
												//汇付支付宝
												console.log("res.data.obj.expend# " + res.data.obj.expend)
												// console.log("1 " + res.data.obj)
												// console.log("11" + res.data.obj.expend)
												
												if (res.data.obj.expend && res.data.obj.expend.qrcode_url) {
													// #ifdef H5
													// window.location.href = res.data.obj.expend.pay_info
													window.location.href = res.data.obj.expend.qrcode_url
													// #endif
													// #ifdef APP-PLUS
													// plus.runtime.openURL(res.data.obj.url)
													// plus.runtime.openURL(res.data.obj.query_url)
													plus.runtime.openURL(res.data.obj.expend.qrcode_url)
													// plus.runtime.openURL(res.data.obj.expend.pay_info)
													// #endif
												}else{
														// 直连支付宝
														this.data = res.data.obj;
														console.log(this.data);
														this.$nextTick(function(){
															console.log(document.getElementById("test"));
															document.forms[0].submit();
														})
												}
											} else if (curPayType === 1) {
												// 微信
												// appJumpMiniPro()	
												this.$u.toast('暂未开通微信支付！')
											} else if (curPayType === 2) {
												// 银行卡
												try {
													if (res.data.obj.expend) {
														// #ifdef H5
														window.location.href = res.data.obj.expend.pay_url
														// #endif
														// #ifdef APP-PLUS
														plus.runtime.openURL(res.data.obj.expend.pay_url)
														// #endif
													}
												} catch (e) {
													this.$u.toast('暂未开通银行卡支付！')
												}
												
												// try {
												// 	if (res.data.obj.url) {
												// 		// #ifdef H5
												// 		window.location.href = res.data.obj.url
												// 		// #endif
												// 		// #ifdef APP-PLUS
												// 		plus.runtime.openURL(res.data.obj.url)
												// 		// #endif
												// 	}
												// } catch (e) {
												// 	this.$u.toast('暂未开通银行卡支付！')
												// }
											}
												
										} else {
											this.$u.toast(res.data.msg)
										}
									})
								} else {
									this.$u.toast('请选择支付方式');
								}
							} else {
								if(this.config.rechargeMultiple==undefined){
									this.$u.toast('数据加载中');
								}else{
								  this.$u.toast('充值金额必须是' + this.config.rechargeMultiple + '的整倍数')		
								}							
							}
						// this.keyboardShow = true;
						// this.withdrawalFlag = true;
					} else {
						this.$u.toast('请输入充值金额')
					}
			},1000),
			openFn() {
				this.isShow = true;
			},
			closeFn() {
				this.isShow = false;
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.urlhidden{
		display: none;
	}
	.recharge {
		min-height: 100vh;
		overflow: hidden;
		background-color: #fff;
		padding-top: 120upx;

		.withdrawalModal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10071;
			background-color: rgba($color: #000000, $alpha: 0.2);

			.withdrawalBox {
				width: 600upx;
				padding: 70upx 40upx;
				color: #333;
				background-color: #fff;
				border-radius: 10upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
				margin-top: -400upx;

				.password {
					width: 100%;
					height: 80upx;
					position: relative;

					input {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}

					.flex {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.password_num {
							width: 80upx;
							height: 80upx;
							line-height: 80upx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #999;

							.inputCont {
								display: flex;
								align-items: center;

								.miney_data {
									width: 20upx;
									height: 20upx;
									background-color: #000000;
									border-radius: 50%;
								}
							}

						}
					}
				}

				.password::after {
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.title {
					color: #333;
					font-size: 30upx;
					line-height: 30upx;
					font-weight: 800;
					text-align: center;
					padding-bottom: 145upx;
					position: relative;

					.closeIcon {
						position: absolute;
						top: -40upx;
						right: 0;
					}
				}
			}
		}
		.error {
			display: flex;
			.error-text {
				color: #ff0000;
			}
		}
		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}

		.bank-card-info {
			font-size: 30upx;
			font-weight: 400;
			color: #333;
			padding: 100upx 0upx 0upx;

			.bankBox {
				padding-top: 40upx;

				.bankItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 30upx;

					.text {
						flex: 1;
						padding-left: 20upx;
					}

					.img {
						width: 48upx;
					}

					.radio-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex-flow: column wrap;
						width: 100%;

						.radio-item {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-flow: row nowrap;
							margin-bottom: 40upx;
						}
					}
				}
			}

		}

		.withdrawal-content {
			padding: 40upx 30upx 0;
			position: relative;
			font-size: 24upx;
			font-weight: 400;
			color: #333;

			.title {
				font-size: 32upx;
				font-weight: 800;
			}

			.content-input {
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
				display: flex;
				align-items: center;
				font-size: 60upx;
				padding: 60upx 0 0upx;

				.input-style {
					width: 100%;
					font-size: 72upx;
					padding-left: 40upx;
				}

				.place-style {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.all-withdrawal {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #C09B3A;
					white-space: nowrap;
				}
			}

			// .all-withdrawal {
			// 	color: #EF3D26;
			// }

			.cont {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				.num {
					color: #C09B3A;
					margin-left: 8upx;
				}
			}

			.submit-bottom {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding: 16upx 50upx 30upx;
				margin-top: 220upx;

				.submit-btn {
					width: 100%;
					height: 96upx;
					background: #CEA539;
					border-radius: 10upx;
					font-size: 32upx;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.boxPopup {
			width: 100%;
			padding: 30upx 40upx;
			background-color: #fff;
			color: #333;

			.title {
				color: #2c1769;
				font-size: 36upx;
				font-weight: 800;
				text-align: center;
				padding-bottom: 30upx;
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
			}

			.lists-item {
				width: 100%;
				font-size: 24upx;
				font-weight: 400;
				color: #999;
				padding: 20upx 0upx 20upx;
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
				position: relative;

				.iconf {
					position: absolute;
					top: 28upx;
					right: 0;
				}

				.card-info {
					font-size: 30upx;
					color: #333;
				}
			}

			.submit-bottom {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding: 40upx 100upx 0;

				.submit-btn {
					width: 100%;
					padding: 0 100upx;
					height: 60upx;
					line-height: 60upx;
					background: #2c1769;
					font-size: 24upx;
					border-radius: 10upx;
					font-weight: 400;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

	}
</style>
